<head>
    <script src="./lodash.min.js"></script>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="shuffle">洗牌</button>
    </br>
        <transition-group name="numls" tag="p">
            <span v-for="item in items" :key="item" class="list-item">{{item}}</span>
        </transition-group>
    </div>
    <script>
         var vm = new Vue({
            el:"#app",
            data:{
                items:[1,2,3,4,5],
                
            },
            methods:{
                shuffle(){
                    this.items=_.shuffle(this.items)
                }
            }
        })
    </script>
    <style>
        .list-item{
            background-color: red;
            display: inline-block;
            margin-right: 10px;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            text-align: center;
            line-height: 25px;
            color: aliceblue;
        }
        .numls-move{
            transition: transform 1s;
        }
    </style>
</body>